<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <el-row>
          <el-col :span="20">
            <slot name="header"></slot>
          </el-col>
          <el-col :span="2" @click="navigate('/individual')">
            <el-text size='large' tag="b">{{ user.userName }}</el-text>
          </el-col>
          <el-col :span="1">
            <el-button type="default" @click="logout">注销</el-button>
          </el-col>
        </el-row>
      </el-header>

      <el-container><!-- 控制侧边栏与主体内容的布局 -->

        <!-- 侧边栏 -->
        <el-aside :style="{ width: sidebarVisible ? '260px' : '0px' }">
          <sidenav
            @toggle="toggleSidebar"
            :modelValue="sidebarVisible"
            :activeRoute="activeRoute"
            @update:active-route="activeRoute = $event"
          />
        </el-aside>
        <el-button class="toggle-btn" @click="toggleSidebar" type="primary" round size="large">
          <i :class="sidebarVisible ? 'el-icon-s-fold' : 'el-icon-s-unfold'"></i>
          <el-icon><Operation /></el-icon>
        </el-button>

        <!-- 主体内容-表格 -->
        <el-container>
          <el-main>
            <slot name="main">
              <router-view :key="$route.fullPath"></router-view>
            </slot>
          </el-main>

          <el-footer>© 2023 管理后台 | 版权所有</el-footer>
        </el-container>

      </el-container>
    </el-container>
  </div>
</template>

<script>
import Sidenav from '../Component/Sidenav.vue'; // 引入侧边栏组件
import axios from 'axios'; // 确保引入axios

export default {
  components: {
    Sidenav,
  },
  data() {
    return {
      sidebarVisible: true,
      activeRoute: this.$route.path,
      user: {
        userName: '',
      },
    };
  },
  methods: {
    toggleSidebar() {
      this.sidebarVisible = !this.sidebarVisible;
    },
    navigate(path) {
      this.$router.push(path);
    },
    logout() {
      axios.get('/auth/logout')
        .then(() => {
          this.$router.push('/login'); // 注销成功后跳转
        })
        .catch(error => {
          console.error("注销失败:", error);
          alert("注销请求失败，请稍后重试。");
        });
    },
    fetchUserInfo() {
      axios.get('/admin/user/myself')
        .then(response => {
          console.log('获取到的用户信息:', response); // 打印用户信息以确认
          this.user = response;
        })
        .catch(error => {
          console.error('获取用户信息失败:', error);
          alert('获取用户信息失败，请稍后重试。'); // 添加用户友好的错误提示
        });
    },
  },
  watch: {
    $route(to) {
      this.activeRoute = to.path;
    },
  },
  mounted() {
    this.fetchUserInfo(); // 组件加载时获取用户信息
  },
};
</script>

<style>
.common-layout {
  height: 100vh; /* 设置母板页面的高度为全屏 */
}

.el-header {
  background-color: #409eff; /* 头部背景色 */
  color: white; /* 头部文字颜色 */
  text-align: center; /* 文字居中 */
  line-height: 60px; /* 头部高度 */
}

.el-footer {
  text-align: center; /* 底部文字居中 */
  line-height: 60px; /* 底部高度 */
}

.el-aside {
  background-color: rgba(64, 158, 255, 0.2);
  backdrop-filter: blur(20px); /* 侧边栏模糊 */
  height: 100%; /* 侧边栏高度为全屏 */
}

.toggle-btn {
  z-index: 3; /* 确保按钮在最上层 */
  margin-left: 5px;
  margin-top: 5px;
}
</style>
